<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 引入网盘界面的样式文件 from 文件.html-->
    <link rel="stylesheet" href="css/netdisk.css">

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/fontawesome/css/all.min.css" rel="stylesheet">
    <link href="css/tooltip/css/tooltip2.css" rel="stylesheet">
    <title>Title</title>
    <style>
        body{
            height: 100%;
            font-family: SFUIText,PingFangSC-Regular,Helvetica Neue,Helvetica,Arial,sans-serif;
            color: #333;
            background-color: #fff;
            -webkit-appearance: none;
            font-size: 14px;
        }
        h1,h2,h3,h4,ul,body,p{
            margin: 0;
            padding: 0;
        }
        div{
            display: block;
        }
        a{
            background: transparent;
            text-decoration: none;
            -webkit-tap-highlight-color: transparent;
            color: #05082c;
            cursor: pointer;
        }
        a:hover{
            text-decoration: none;
        }
        li{
            list-style: none;
            display: list-item;
            text-align: -webkit-match-parent;
        }
        img{
            border: 0;
        }
        #header{
            height: 60px;
            line-height: 4.968rem;
            width: 100%;
            padding: 0;
            display: block;
            text-align: center;
            z-index: 100;
            position: relative;
            font-size: 1.9872rem;
            color: #1F1F1F;
            font-weight: 700;
        }
        #header_logo{
            width: 158px;
            position: absolute;
            left: 25px;
            cursor: pointer;
            color: #fff;
        }
        #wp-aside-nav__main{
            background-color: #fff;
            width: 5%;
            font-size: 12px;
            text-align: center;
            z-index: 2;
            display: inline-block;
            float: left;
            position: relative;
            height: 100%;
            border-right: 1px solid #f1f2f4;
        }
        #modules{
            float: left;
            width: 95%;
            /*border: black 1px solid;*/
        }
        .router-link-exact-active{
            margin-top: 0;
            margin-top: 30px;
            display: inline-block;
            color: #636d7e;
            width: 100%;
        }

        .wp-aside-nav__main-item-img{
            display: inline-block;
            width: 36px;
            height: auto;
        }
        .text-elli{
            margin-top: 6px;
            max-width: 80px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        button{
            font-family: SFUIText,PingFangSC-Regular,Helvetica Neue,Helvetica,Arial,sans-serif;
            text-transform: none;
            overflow: visible;
            color: inherit;
            margin: 0;
        }
        .admin_tag:hover{
            color: #31c27c;
            text-decoration: none;
        }

        .admin_tag{
            display: inline-block;
            vertical-align: middle;
            font-family: SFUIText,PingFangSC-Regular,Helvetica Neue,Helvetica,Arial,sans-serif;
            font-size: 14px;
            position: relative;
        }
        .iconfont{
            font-size: 14px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        .item_image_hover{
            transform: scale(1.2) translateZ(0);
            transition-property: opacity,transform;
            transition-duration: .5s;
        }
        .item_image_hover_out{
            transform: scale(1) translateZ(0);
            transition-property: opacity,transform;
            transition-duration: .5s;
        }
        .wp-aside-nav{
            font-size: 12px;
            font-weight: 400;
            color: #636d7e;
            border-radius: 0;

            height: 40px;
            line-height: 40px;
            display: inline-block;
            margin-left: 12px;
        }
        .wp-aside-nav__sub-item-body{
            padding-left: 50px;

        }
        .friend_list:hover .wp-aside-nav__sub-item-body{
            color: #09AAFF;
        }
        .wp-aside-nav__sub-item-body_click{
            color: #09AAFF;
            font-weight: 700;
            font-size: 15px;
        }
        .wp-aside-nav__sub-item-text{
            margin-left: 13px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
            vertical-align: middle;
            max-width: 110px;
        }

        .friend_list:hover{
            background-color:#ececec;

        }
        .character-img{
            box-sizing: border-box;
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }
        #tools-panel{
            color: #969896;
            background: #ffffff;
            border-color: #cccccc;
            width: 100%;
            height: 40px;
            background-color: #fff;
            margin-top: 0;
            display: block;
            list-style-type: disc;
            border-left: solid 1px #e8e8e8;
            border-right: solid 1px #e8e8e8;
            font-size: 44px;
            border-top: solid 1px #e8e8e8;
        }
        #tools-panel li{
            color: #969896;
            float: left;
            padding: 6px 6px 0 6px;

            color: #969896;
            font-size: 23px;
            cursor: pointer;
        }
        .tooltip:hover{
            color: #fac36c;;
        }
        #send_pannel{
            background: #ffffff;
            border-color: #cccccc;
            width: 100%;
            border: solid 1px #e8e8e8;
            border-top: 0;
            height: 96px;
            position: relative;
        }
        #send_text{
            width: 680px;
            outline: 0;
            font-size: 20px;
            overflow-x: hidden;
            overflow-y: auto;
        }
        .send_pannel .send_text{
            padding: 10px;
            height: 70px;
            font-size: 16px;
            overflow: auto;
            float: left;
            background-color: transparent;

        }
        input[type=button]{
            -webkit-appearance: none;
            outline: 0;
        }
        #sendBtn{
            border: 1px solid #fac36c;
            background: #fac36c;
            width: 80px;
            height: 52px;
            line-height: 52px;
            bottom: 4px;
            right: 4px;
            display: block;
            background-color: #fac36c;
            position: absolute;
            color: white;
            border-radius: 2px;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
            box-shadow: 0 1px 3px #d9d9d9;
            text-shadow: 0 1px 1px #444;
            font-size: 14px;
        }
        [contentEditable=true]:empty:not(:focus):before{
            color: gainsboro;
            filter: alpha(opacity=80);
            -moz-opacity: .8;
            opacity: .8;
            content: attr(placeholder);
        }
        .emot-panel{
            position: absolute;
            width: 312px;
            height: 144px;
            left: 2px;
            bottom: 2px;
            display: none;
        }
        .tools-face-content{
            padding: 0;
            float: left;
            line-height: 22px;
            border-radius: 2px;
            left: 0;
            text-align: center;
        }
        .tools-face-list{
            position: absolute;
            width: 312px;
            padding: 10px;
            border: solid 1px #d9d9d9;
            background-color: #fff;
            box-shadow: 0 0 10px rgb(0 0 0);
        }
        .tools-face-list li{
            cursor: pointer;
            float: left;
            border: 1px
            solid #e8e8e8;
            height: 32px;
            width: 36px;
            overflow: hidden;
            margin: -1px 0 0 -1px;
            padding: 4px 1px;
            text-align: center;
        }
        .tools-face-list li img{
            height: 30px;
            width: 30px;
        }
        .tooltip .face-list{
            visibility: hidden;
            position: absolute;
            z-index: 1;
            bottom: 100%;
            left: 50%;
            margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
        }
        .tooltip:hover .face-list {
            visibility: visible;
        }
        .send_file{
            position: absolute;
            display: block;
            width: 46px;
            height: 32px;
            color: #fff;
            text-decoration: none;
            text-align: center;
            cursor: pointer;
            filter: alpha(opacity=0);
            -moz-opacity: 0;
            opacity: 0;
            left: 0;
            top: 0;
            z-index: 0;
        }
        .content-chat-main{
            padding: 5px 5px 5px;
            overflow-x: hidden;
            overflow-y: auto;
            min-height: 100px;
            height: calc(100vh - 193px);
            height: -moz-calc(100vh - 193px);
            height: -webkit-calc(100vh - 193px);
        }
        .content-chat-main ul{
            margin: 0;
            padding: 0;
            display: block;
            list-style-type: disc;

        }
        .content-chat-main ul li{
            position: relative;
            font-size: 14px;
            margin-bottom: 0;
            display: block;
            text-align: -webkit-match-parent;
            margin-top: 0;
            margin-bottom: 10px;
            padding: 4px;
            clear: both;
            overflow: hidden;
        }

        .system{
            text-align: center;
            font-size: 12px;
            padding: 2px 0;
            margin: 10px auto 10px auto;
            border-radius: 20px;
            color: #7f7f7f;
        }

        .system .system-bg{
            height: 1px;
            width: 27px;
            margin-top: 2px;
            margin-bottom: 4px;
            background-color: #b4b8bd;
            display: inline-block;
        }
        .content-chat-main .content-chat-mine{
            text-align: right;
            position: absolute;
            padding-left: 10px;
            margin-right: 5px;
            right: 10px;
        }
        .content-chat-mine img{
            position: relative;
            width: 32px;
            height: auto;
            border-radius: 20%;
            border: 0;
            vertical-align: middle;
        }
        .content-chat-text{
            position: relative;
            line-height: 22px;
            margin-top: 0;
            margin-right: 60px;
            margin-left: 80px;
            margin-bottom: 10px;
            padding: 8px 15px;
            border: 1px solid #e5e6e7;
            background: #ededed;
            text-align: left;
            color: #000;
            word-break: break-all;
            display: inline-block;
            border-radius: 3px;
            float: right;
        }
        .content-chat-text:after{
            position: absolute;
            top: 8px;
            right: -6px;
            overflow: hidden;
            width: 0;
            height: 0;
            border: 1px solid #e5e6e7;
            border-left: 0;
            display: inline-block;
            width: 8px;
            height: 10px;
            background: #ededed;
            border-radius: 0 0 20px 0;
            content: '';
        }
        .content-chat-you{
            position: absolute;
            padding-right: 10px;
            padding-left: 10px;
            width: 32px;
            height: auto;
            border-radius: 20%;
            border: 0;
            vertical-align: middle;
        }
        .content-chat-you img{
            position: relative;
            width: 32px;
            height: auto;
            border-radius: 20%;
            border: 0;
            vertical-align: middle;
        }
        .content-chat-text-y{
            color: #7b7a79;
            background-color: #ffffff;
            position: relative;
            line-height: 22px;
            margin-top: 0;
            margin-left: 60px;
            margin-right: 80px;
            padding: 8px 15px;
            margin-bottom: 5px;
            text-align: left;
            background-color: white;
            color: #7b7a79;
            word-break: break-all;
            display: inline-block;
            border-radius: 3px;
            border: 1px solid #e5e6e7;
        }
        .content-chat-text-y:after{
            background-color: #ffffff;
            position: absolute;
            top: 8px;
            left: -8px;
            overflow: hidden;
            border: 1px
            solid #e5e6e7;
            border-right: 0;
            display: inline-block;
            width: 8px;
            height: 10px;
            background: white;
            border-radius: 0 0 0 20px;
            content: '';
        }
        .find-light-icon{
            position: absolute;
            right: 54px;
            top: 17px;
            width: 8px;
            height: 8px;
            background: #f8645c;
            border-radius: 100%;
        }
    </style>
    <link rel="stylesheet" href="css/tooltip/css/tooltip1.css">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <!--引入Vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--引入axios-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

</head>
<body>

<header id="header" style="background-color: rgb(255, 255, 255);
                color: rgb(31, 31, 31);
                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
">
    <div style="float:left; height: 100%;width: 175px;padding-left: 25px">
        <span id="header_logo" style="float:left;">
    <img src="images/logoMain.png" style="width: 120%;">
    </span>
    </div>
    <div style="float: left;">
         <span   style="font-size: 18px;
                    line-height: 18px;
                    margin-left: 21px;
                    white-space: nowrap;">
<!--    <span style="font-size: 12px;">零柒网盘社区</span>-->
    </span>
    </div>
    <div style="float: right;padding-right: 20px">
        <div id="userCenter" style="display: inline-block;margin-right: 20px;
                    vertical-align: middle;
                    color: #454d5a;
                    ">
            <div style="display: block;">
                <i class="fa fa-user-circle iconfont" aria-hidden="true"></i>
                <a class="admin_tag" href="userCenter.html" @click="logout()">注销</a>
            </div>
        </div>
        <div id="userCenter" style="display: inline-block;margin-right: 20px;
                    vertical-align: middle;
                    color: #454d5a;
                    ">
            <div style="display: block;">
                <i class="fa fa-user-circle iconfont" aria-hidden="true"></i>
                <a class="admin_tag" href="userCenter.html">个人中心</a>
            </div>
        </div>
        <div id="transferList" style="display: inline-block;margin-right: 20px;
                    vertical-align: middle;
                    color: #454d5a;
                    ">
            <div style="display: block;">
                <div style="display: inline-block;
                            vertical-align: middle;">
                    <a style="color: #454d5a;">
                        <i class="fa fa-link" aria-hidden="true"></i>
                        <a class="admin_tag" href="admin.html">传输列表</a>
                    </a>
                </div>
            </div>
        </div>
        <div id="SystemInfo" style="display: inline-block;margin-right: 20px;
                    vertical-align: middle;
                    color: #454d5a;
                    position: relative;">
                <div style="display: block;">
                    <div style="position: relative;
                            width: inherit;

                            vertical-align: middle;
                            height: 61px;
                            display: inline-block;">
                    </div>
                    <div style="display: inline-block;
                            vertical-align: middle;" class="tooltip2">
                        <a style="color: #454d5a;">
                            <i class="fa fa-volume-off" aria-hidden="true"></i>
                            <a class="admin_tag" href="admin.html">系统通知</a>
                            <i class="find-light-icon" style="display: block"></i>
                        </a>
                        <div class="tooltiptext">
                            <li class="popup_user_toolbar__item" style="position: relative" v-for="n in notifies">
                                <p v-if="n.typeId==1" style="color: red;font-size: 10px">【陌生人】</p>
                                <p v-else style="color: red;font-size: 10px">【好友】</p>
                                <p v-text="n.friendName" style="color: green;font-size: 5px">killyou</p>
                                <p style="font-size: 5px">给你发来了一条消息</p>
                                <div style="margin-left: 5px" class="container" @click="show==false?show=true:show=false">
                                    <div class="dot"></div>
                                </div>
                                <div v-show="show" style="width: 100%;height: 100px;overflow: hidden;position: absolute">
                                    <p style="display: block">请求添加你为好友</p>
                                    <button style="background-color: #1bb3e9;color: white" type="button" class="btn btn-default"
                                            @click="addFriends">接受</button>
                                    <button style="background-color: #9c1d3d;color: white" type="button"
                                            class="btn btn-default">忽略</button>
                                </div>
                            </li>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</header>

<div>
    <!--  左侧功能栏  -->
    <div id="wp-aside-nav__main">
        <div style="background-color: #fff;position: relative;z-index: 1;">
            <a @click="showPub()" class="router-link-exact-active">
                <div class="wp-aside-nav__main-item-wrap" style="position: relative;">
                    <img :src="dropboximage1"
                         class="wp-aside-nav__main-item-img">
                    <p class="text-elli">公共网盘</p>
                </div>
            </a>
            <a @click="showPri()" class="router-link-exact-active">
                <div class="wp-aside-nav__main-item-wrap" style="position: relative;">
                    <img :src="dropboximage2"
                         class="wp-aside-nav__main-item-img">
                    <p class="text-elli">私人网盘</p>
                </div>
            </a>
            <a @click="showFri()" class="router-link-exact-active">
                <div class="wp-aside-nav__main-item-wrap" style="position: relative;">
                    <img :src="friendimage"
                         class="wp-aside-nav__main-item-img">
                    <p class="text-elli">好友列表</p>
                </div>
            </a>
            <a class="router-link-exact-active">
                <div class="wp-aside-nav__main-item-wrap" style="position: relative;">
                    <h1 class="text-elli">功<br>
                        <br>
                        能<br>
                        <br>
                        栏</h1>
                </div>
            </a>
        </div>
    </div>

    <!--  模块  -->
    <div id="modules" class="modules" >


        <!--  好友聊天模块 开始 -->
            <div v-show="showModule==2" class="friend" style="margin-left: 000px">
                <div class="friend_list" style="width: 200px;
                padding-top: 40px;
                float:left;
                display: inline-block;
                height: 100%;
                position: fixed;
                border-right: 1px solid #f1f2f4;">
                    <div style="height: 100%;
                display: -ms-inline-flexbox;
                display: inline-flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                position: relative;
                z-index: 1;
                background-color: #fff;
                max-height: calc(100% - 60px);">
                        <div>
                            <a style="background-color: #eef9fe;
                color: #06a7ff;cursor: pointer;
                    height: 40px;
                line-height: 40px;
                display: inline-block;
                width: 177px;
                border-radius: 10px;
                padding-left: 24px;
                padding-right: 18px;
                margin-left: 12px;
                font-weight: 700;">
                                <i style=" background-color: #eef9fe;
                                            color: #06a7ff;" class="fa fa-chevron-down" aria-hidden="true"></i>
                                <span style="display: inline-block;vertical-align: middle;margin-left: 15px;">我的好友</span>
                            </a>
                        </div>
                        <div id="friends" >
<!--    暂时注释：好友列表
                            <div class="friend_list" v-for="friend in friends" @click="changeFont($event)">
                                <span>
                                    <a class="wp-aside-nav">
                                        <div class="wp-aside-nav__sub-item-body">
                                            <img src="images/profile.png" class="character-img">
                                            <p class="wp-aside-nav__sub-item-text" v-text="friend.friendName"></p>
                                        </div>
                                    </a>
                                </span>
                            </div>
-->
                        </div>
                    </div>
                </div>
                <div class="chat-box" style="margin-left: 20%;
                            margin-top: 3%;
                            border-color: #4486e9;
                        box-shadow: 0 0 2px #4486e9;
                            display: inline-flex;;
                            position:relative;
                            width: 800px;">
                    <div style="background: #fff;
                                border-color: #000000;
                                border: solid 1px #e8e8e8;
                                width: 100%;
                                position: relative;">
                        <div style="height: 430px;" class="content-chat-main">
                            <ul id="content_main">

                                <!--   暂时注释： 聊天记录    -->
<!--
                                <div v-for="c in chatHistory">
                                    <div v-if="c!== undefined && c!== null">
                                        <li >
                                            <div class="system">
                                                <span class="system-bg left"></span>
                                                <span v-text="c.createTime"></span>
                                                <span class="system-bg right"></span>
                                            </div>
                                        </li>
                                        <li v-if="c.userId==c.masterId">
                                            <div class="content-chat-mine">
                                                <img src="images/profile.png">
                                            </div>
                                            <div style="font-size: 18px" class="content-chat-text" v-text="c.chat"></div>
                                        </li>
                                        <li v-if=" c.userId!==c.masterId">
                                            <div class="content-chat-you">
                                                <img src="images/profile1.png">
                                            </div>
                                            <div class="content-chat-text-y">
                                                <span style="font-size: 18px" v-text="c.chat"></span>
                                            </div>
                                        </li>
                                    </div>

                                </div>
-->

                            </ul>
                        </div>
                        <ul id="tools-panel">
                            <li>

                                <i class="fa fa-file tooltip" aria-hidden="true">
                                    <input class="send_file" type="file">
                                    <div class="tooltiptext">发送文件</div>
                                </i>
                            </li>
                            <li>
                                <i style="font-size: 20px" class="fas fa-smile-beam tooltip" aria-hidden="true">
                                    <div class="emot-panel face-list" unselectable="on" onmousedown="return false;" style="display: block;">
                                        <div class="tools-face-content">
                                            <ul class="tools-face-list">
                                                <li title="666"><img src="https://data.pop800.com/assets/emot/pop/1.png"></li>
                                                <li title="OK"><img src="https://data.pop800.com/assets/emot/pop/2.png"></li>
                                                <li title="喝水"><img src="https://data.pop800.com/assets/emot/pop/3.png"></li>
                                                <li title="坏笑"><img src="https://data.pop800.com/assets/emot/pop/4.png"></li>
                                                <li title="大哭"><img src="https://data.pop800.com/assets/emot/pop/5.png"></li>
                                                <li title="大笑"><img src="https://data.pop800.com/assets/emot/pop/6.png"></li>
                                                <li title="奋斗"><img src="https://data.pop800.com/assets/emot/pop/7.png"></li>
                                                <li title="委屈"><img src="https://data.pop800.com/assets/emot/pop/8.png"></li>
                                                <li title="害羞"><img src="https://data.pop800.com/assets/emot/pop/9.png"></li>
                                                <li title="尴尬"><img src="https://data.pop800.com/assets/emot/pop/10.png"></li>
                                                <li title="得意"><img src="https://data.pop800.com/assets/emot/pop/11.png"></li>
                                                <li title="您好"><img src="https://data.pop800.com/assets/emot/pop/12.png"></li>
                                                <li title="悲恸"><img src="https://data.pop800.com/assets/emot/pop/13.png"></li>
                                                <li title="惊讶"><img src="https://data.pop800.com/assets/emot/pop/14.png"></li>
                                                <li title="我说"><img src="https://data.pop800.com/assets/emot/pop/15.png"></li>
                                                <li title="打脸"><img src="https://data.pop800.com/assets/emot/pop/16.png"></li>
                                                <li title="捂脸"><img src="https://data.pop800.com/assets/emot/pop/17.png"></li>
                                                <li title="撅嘴"><img src="https://data.pop800.com/assets/emot/pop/18.png"></li>
                                                <li title="没电了"><img src="https://data.pop800.com/assets/emot/pop/19.png"></li>
                                                <li title="生气"><img src="https://data.pop800.com/assets/emot/pop/20.png"></li>
                                                <li title="生病"><img src="https://data.pop800.com/assets/emot/pop/21.png"></li>
                                                <li title="疑问"><img src="https://data.pop800.com/assets/emot/pop/22.png"></li>
                                                <li title="色"><img src="https://data.pop800.com/assets/emot/pop/23.png"></li>
                                                <li title="防疫"><img src="https://data.pop800.com/assets/emot/pop/24.png"></li></ul>
                                        </div>
                                    </div>
                                </i>
                            </li>

                        </ul>
                        <form method="post" id="sendChat" @submit.prevent="saveChatHistory">
                            <div id="send_pannel" class="send_pannel">
                                <div  id="send_text"  class="send_text" contenteditable="true"  placeholder="请在此输入文本内容..."></div>
                                <input id="sendBtn" type="submit" value="发送">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        <!--  好友聊天模块 结束  -->

        <!--  私人网盘模块 开始  -->
            <div v-show="showModule==0" class="private" >
                <section class="row">
                    <div  class="col-md-2" style="width: 15%;">
                        <ul id="left">
                            <li @click="changeTypeFilter('全部文件')">
                                <a href="javascript:void(0);" style="background-color:#e8e8e8;" >
                                    <span style="color:#09aaff;">
                                        <span><i class="fa fa-bars" aria-hidden="true"></i></span>
                                        <span style="margin-left: 10px;" >我的文件</span>
                                    </span>
                                </a>
                            </li>

                            <li @click="changeTypeFilter('图片')">
                                <a href="javascript:void(0);">
                                    <span class="text">
                                        <span><i class="fa fa-area-chart" aria-hidden="true"></i></span>
                                        <span style="margin-left: 10px;" >图片</span>
                                    </span>
                                </a>
                            </li>

                            <li @click="changeTypeFilter('文档')">
                                <a href="javascript:void(0);" >
                                    <span class="text">
                                        <span><i class="fa fa-file-o" aria-hidden="true"></i></span>
                                        <span style="margin-left: 10px;" >文档</span>
                                    </span>
                                </a>
                                    </li>

                                    <li @click="changeTypeFilter('视频')">
                                <a href="javascript:void(0);">
                                    <span class="text">
                                        <span><i class="fa fa-play" aria-hidden="true"></i></span>
                                        <span style="margin-left: 10px;" >视频</span>
                                    </span>
                                </a>
                            </li>

                            <li @click="changeTypeFilter('音乐')">
                                <a href="javascript:void(0);">
                                    <span class="text">
                                        <span><i class="fa fa-music"></i></span>
                                        <span style="margin-left: 10px;" >音乐</span>
                                    </span>
                                </a>
                            </li>

                            <li @click="changeTypeFilter('其它')">
                                <a href="javascript:void(0);">
                                    <span class="text">
                                        <span><i class="fa fa-ellipsis-h"></i></span>
                                        <span style="margin-left: 10px;" >其它</span>
                                    </span>
                                </a>
                            </li>

                            <li>
                                <a href="">
                                    <span class="text">
                                        <span><i class="fa fa-comment-o" aria-hidden="true"></i></span>
                                        <span style="margin-left: 10px;">我的分享</span>
                                    </span>
                                </a>
                            </li>

                            <li>
                                <a href="">
                    <span class="text">
                        <span><i class="fa fa-trash" aria-hidden="true"></i></span>
                        <span style="margin-left: 10px;">回收站</span>
                    </span>
                                </a>
                            </li>

                            <li>
                                <a href="">
                    <span class="text">
                        <span><i class="fa fa-archive" aria-hidden="true"></i></span>
                        <span style="margin-left: 10px;">收集文件</span>
                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div  class="col-md-10" style="float: left;width: 55%;"  >


                        <div class="all" style="width: 100%;">
                            <div id="all_left" style="width:10%; height: 40px;line-height: 40px;"><span>{{typeFilter}}</span></div>
                            <div id="searcher" style="width: 20%;height: 40px;line-height: 20px;float: left;height: 40px;">
                                <input  v-model="searchKeyword" style="width: 95%;height: 25px;margin-top: 7px;" type="text"placeholder="搜索...">
                            </div>
                            <div id="all_right" style="width:20%; float: left;height: 40px;line-height: 40px;"><span>已加载文件:{{priFile_arr.length}}个</span><span class="fa fa-server" style="padding-left: 5px;font-size: 15px"></span></div>
                            <div id="top_1"  style="width:; float: right;width: 35%;height: 24px;margin-top: 8px;">

                                <button class="button" style="position: relative;overflow: hidden;" >
                                    <i class="fa fa-upload"></i>
                                    <span>上传</span>
                                    <form id="submitFile">
                                        <input v-on:input="upload()" name="file" type="file" style="position: absolute;opacity: 0.0;top: -25px;left: -25px;font-size: 50px;">
                                    </form>
                                </button>

                                <button class="button">
                                    <i class="fa fa-share"></i>
                                    <span>分享</span>
                                </button>

                                <button class="button">
                                    <i class="fa fa-download"></i>
                                    <span>下载</span>
                                </button>
                            </div>
                        </div>
                        <hr>

                        <!--  文件列表  -->
                        <div class="all_2">
                            <table>
                                <tr>
                                    <th><div style="display: inline-block;width: 100px;height: 51px;"><input type="checkbox"style="margin:0;padding-top: 2px"><span>全选</span></div></th>
                                    <th><span style="display: inline-block;width: 120px;height: 51px;">文件名</span></th>
                                    <th><span style="display: inline-block;width: 120px;height: 51px;">大小</span></th>
                                    <th><span style="display: inline-block;width: 120px;height: 51px;">类型</span></th>
                                    <th><span style="display: inline-block;width: 120px;height: 51px;">操作</span></th>
                                    <th><span style="display: inline-block;width: 120px;height: 51px;">访问级别</span></th>
                                </tr>
                                <tr v-for="f in priFile_arr" v-if="f.fname.includes(searchKeyword)&&(f.type==typeFilter||typeFilter=='全部文件')" @click="clickLine(f)">
                                    <td><input type="checkbox"style="margin:0;padding-top: 2px"></td>
                                    <td>{{f.fname}}</td>
                                    <td>{{f.size}}Byte</td>
                                    <td>{{f.type}}</td>
                                    <td>
                                        <a href="" @click="del(f.fid)">删除</a>
                                        <a :href="f.path" :download="f.fname" @click="download(f.fid)">下载</a>
                                    </td>
                                    <td>
                                        <a v-if="f.status!=2" @click="changeStatus(2,f.fid)">公开</a>
                                        <a v-if="f.status!=1" @click="changeStatus(1,f.fid)">仅好友</a>
                                        <a v-if="f.status!=0" @click="changeStatus(0,f.fid)">私密</a>
                                    </td>
                                </tr>
                            </table>

                        </div>
                    </div>

                    <!--  文件详细信息  -->
                    <div  v-cloak id="fileInfo" class="button_right" style="float: left;width: 30%;">
                        <div style="width: 240px; height: 31px;padding-bottom: 15px;color:#03081a;font-size: 14px;font-weight: bold">
                            文件详情
                        </div>
                        <div id="aa" v-if="showDetails==0">
                            <img src="https://nd-static.bdstatic.com/m-static/v20-main/img/empty-folder.55c81ea2.png" alt=""style="width:60px;height: 60px;margin-left: 20px">
                            <p style="color: #878c9c;font-size: 14px">选中文件,查看详情</p>
                        </div>
                        <table v-if="showDetails==1">
                            <tr><td>名称:</td><td>{{file.fname}}</td></tr>
                            <tr><td>类型:</td><td>{{file.type}}</td></tr>
                            <tr><td>大小:</td><td>{{file.size}}ByteByte</td></tr>
                            <tr><td>访问级别:</td><td v-if="file.status==0">私密</td><td v-else-if="file.status==1">仅好友</td><td v-else>公开</td></tr>

                            <tr><td>首次上传者:</td><td>{{file.upNick}}</td></tr>
                            <tr><td>首次上传时间:</td><td>{{file.upTime}}</td></tr>
                            <tr><td>被下载次数</td><td>{{file.downTimes}}</td></tr>
                            <tr><td>拥有用户数:</td><td>{{file.quantity}}</td></tr>
                            <tr><td>父级目录</td><td v-if="file.ffname==null">无</td><td v-else>{{file.ffname}}</td></tr>
                        </table>
                    </div>
                </section>
            </div>
        <!--  私人网盘模块 结束  -->

        <!--  公共网盘模块 开始  -->
        <div v-show="showModule==1" class="private" >
            <section class="row">
                <div  class="col-md-2" style="width: 15%;">
                    <ul id="left">
                        <li @click="changeTypeFilter('全部文件')">
                            <a href="javascript:void(0);" style="background-color:#e8e8e8;">
                                <span style="color:#09aaff;">
                                    <span><i class="fa fa-bars" aria-hidden="true"></i></span>
                                    <span style="margin-left: 10px;" >公共文件</span>
                                </span>
                            </a>
                        </li>

                        <li @click="changeTypeFilter('图片')">
                            <a href="javascript:void(0);">
                                <span class="text">
                                    <span><i class="fa fa-area-chart" aria-hidden="true"></i></span>
                                    <span style="margin-left: 10px;" >图片</span>
                                </span>
                            </a>
                        </li>

                        <li @click="changeTypeFilter('文档')">
                            <a href="javascript:void(0);">
                                <span class="text">
                                    <span><i class="fa fa-file-o" aria-hidden="true"></i></span>
                                    <span style="margin-left: 10px;" >文档</span>
                                </span>
                            </a>
                        </li>

                        <li @click="changeTypeFilter('视频')">
                            <a href="javascript:void(0);">
                                <span class="text">
                                    <span><i class="fa fa-play" aria-hidden="true"></i></span>
                                    <span style="margin-left: 10px;" >视频</span>
                                </span>
                            </a>
                        </li>

                        <li @click="changeTypeFilter('音乐')">
                            <a href="javascript:void(0);">
                                <span class="text">
                                    <span><i class="fa fa-music"></i></span>
                                    <span style="margin-left: 10px;" >音乐</span>
                                </span>
                            </a>
                        </li>

                        <li @click="changeTypeFilter('其它')">
                            <a href="javascript:void(0);">
                                <span class="text">
                                    <span><i class="fa fa-ellipsis-h"></i></span>
                                    <span style="margin-left: 10px;" >其它</span>
                                </span>
                            </a>
                        </li>

                        <li>
                            <a href="">
                    <span class="text">
                        <span><i class="fa fa-comment-o" aria-hidden="true"></i></span>
                        <span style="margin-left: 10px;">我的分享</span>
                    </span>
                            </a>
                        </li>

                        <li>
                            <a href="">
                    <span class="text">
                        <span><i class="fa fa-trash" aria-hidden="true"></i></span>
                        <span style="margin-left: 10px;">回收站</span>
                    </span>
                            </a>
                        </li>

                        <li>
                            <a href="">
                    <span class="text">
                        <span><i class="fa fa-archive" aria-hidden="true"></i></span>
                        <span style="margin-left: 10px;">收集文件</span>
                    </span>
                            </a>
                        </li>
                    </ul>
                </div>

                <div  class="col-md-10" style="float: left;width: 55%;"  >


                    <div class="all" style="width: 100%;">
                        <div id="all_left" style="width:10%; height: 40px;line-height: 40px;"><span>{{typeFilter}}</span></div>
                        <div id="searcher" style="width: 20%;height: 40px;line-height: 20px;float: left;height: 40px;">
                            <input  v-model="searchKeyword" style="width: 95%;height: 25px;margin-top: 7px;" type="text"placeholder="搜索...">
                        </div>
                        <div id="all_right" style="width:20%; float: left;height: 40px;line-height: 40px;"><span>已加载文件:{{priFile_arr.length}}个</span><span class="fa fa-server" style="padding-left: 5px;font-size: 15px"></span></div>
                        <div id="top_1"  style="width:; float: right;width: 35%;height: 24px;margin-top: 8px;">

                            <button class="button" style="position: relative;overflow: hidden;" >
                                <i class="fa fa-upload"></i>
                                <span>上传</span>
                                <form id="submitFile">
                                    <input v-on:input="upload()" name="file" type="file" style="position: absolute;opacity: 0.0;top: -25px;left: -25px;font-size: 50px;">
                                </form>
                            </button>

                            <button class="button">
                                <i class="fa fa-share"></i>
                                <span>分享</span>
                            </button>

                            <button class="button">
                                <i class="fa fa-download"></i>
                                <span>下载</span>
                            </button>
                        </div>
                    </div>
                    <br>

                    <div class="all_2">
                        <table>
                            <tr>
                                <th><div style="display: inline-block;width: 100px;height: 51px;"><input type="checkbox"style="margin:0;padding-top: 2px"><span>全选</span></div></th>
                                <th><span style="display: inline-block;width: 120px;height: 51px;">文件名</span></th>
                                <th><span style="display: inline-block;width: 120px;height: 51px;">大小</span></th>
                                <th><span style="display: inline-block;width: 120px;height: 51px;">类型</span></th>
                                <th><span style="display: inline-block;width: 120px;height: 51px;">操作</span></th>
                            </tr>
                            <tr v-for="f in pubFile_arr" v-if="f.fname.includes(searchKeyword)&&(f.type==typeFilter||typeFilter=='全部文件')" @click="clickLine(f)">
                                <td><input type="checkbox"></td>
                                <td >{{f.fname}}</td>
                                <td>{{f.size}}Byte</td>
                                <td>{{f.type}}</td>
                                <td>
                                    <a href="javascript:void(0);" @click="superDel(f.fid)">删除</a>
                                    <a :href="f.path" :download="f.fname" @click="download(f.fid)">下载</a>
                                </td>
                            </tr>
                        </table>
                    </div>

                    <div class="button_left">

                    </div>


                </div>

                <div class="button_right" style="float: left;width: 30%;">
                    <div style="width: 240px; height: 31px;padding-bottom: 15px;color:#03081a;font-size: 14px;font-weight: bold">
                        文件详情
                    </div>
                    <div id="aa" v-if="showDetails==0">
                        <img src="https://nd-static.bdstatic.com/m-static/v20-main/img/empty-folder.55c81ea2.png" alt=""style="width:60px;height: 60px;margin-left: 20px">
                        <p style="color: #878c9c;font-size: 14px">选中文件,查看详情</p>
                    </div>
                    <table v-if="showDetails==1">
                        <tr><td>名称:</td><td>{{file.fname}}</td></tr>
                        <tr><td>类型:</td><td>{{file.type}}</td></tr>
                        <tr><td>大小:</td><td>{{file.size}}ByteByte</td></tr>
                        <tr><td>访问级别:</td><td v-if="file.status==0">私密</td><td v-else-if="file.status==1">仅好友</td><td v-else>公开</td></tr>
                        <!--      改名功能还没做,首次上传者先用ID代替名字       -->
                        <tr><td>首次上传者:</td><td>{{file.upUid}}</td></tr>
                        <tr><td>首次上传时间:</td><td>{{file.upTime}}</td></tr>
                        <tr><td>被下载次数</td><td>{{file.downTimes}}</td></tr>
                        <tr><td>拥有用户数:</td><td>{{file.quantity}}</td></tr>
                        <tr><td>父级目录</td><td v-if="file.ffname==null">无</td><td v-else>{{file.ffname}}</td></tr>
                    </table>
                </div>
            </section>
        </div>
        <!--  公共网盘模块 结束  -->
    </div>
</div>







<script src="js/utils.js"></script>
<!--
<script src="js/chat.js"></script>
-->
<script>

    let vm = new Vue({
        el:"#wp-aside-nav__main",
        data:{
            friendimage:"images/friendimageactive.png",
            dropboximage1:"images/dropbox.png",
            dropboximage2:"images/dropbox.png",
            judge:[false,false,true],
        },
        methods:{
            showFri:function(){
                middle_vm.showModule = 2;
                middle_vm.showDetails = 0;
            },
            showPub:function () {
                middle_vm.showModule = 1;
                middle_vm.showDetails = 0;
            },
            showPri:function () {
                middle_vm.showModule = 0;
            }
        }
    })

    $(".tools-face-list li img").click(function (){
        let div = $(this).clone(true)

        $(".send_text").append(div)
    })

    let id3=0;
    let id4=1;
    let id5=2;
    function fn() {
        $(".wp-aside-nav__main-item-img:eq("+id3+")").parent().hover(function () {
            if(!vm.judge[id3]){
                $(this).children(".wp-aside-nav__main-item-img").removeClass("item_image_hover_out")
                $(this).children(".wp-aside-nav__main-item-img").addClass("item_image_hover")
            }
        }, function () {
            $(this).children(".wp-aside-nav__main-item-img").addClass("item_image_hover_out")
            $(this).children(".wp-aside-nav__main-item-img").removeClass("item_image_hover")
        });

        $(".wp-aside-nav__main-item-img:eq("+id4+")").parent().hover(function () {
            if(!vm.judge[id4]){
                $(this).children(".wp-aside-nav__main-item-img").removeClass("item_image_hover_out")
                $(this).children(".wp-aside-nav__main-item-img").addClass("item_image_hover")
            }
        }, function () {
            $(this).children(".wp-aside-nav__main-item-img").addClass("item_image_hover_out")
            $(this).children(".wp-aside-nav__main-item-img").removeClass("item_image_hover")

        });
        $(".wp-aside-nav__main-item-img:eq("+id5+")").parent().hover(function () {
            if(!vm.judge[id5]){
                $(this).children(".wp-aside-nav__main-item-img").removeClass("item_image_hover_out")
                $(this).children(".wp-aside-nav__main-item-img").addClass("item_image_hover")
            }
        }, function () {
            $(this).children(".wp-aside-nav__main-item-img").addClass("item_image_hover_out")
            $(this).children(".wp-aside-nav__main-item-img").removeClass("item_image_hover")

        });
    }
    fn()
    $(".router-link-exact-active").click(function (){
        let id =$(this).children().parents(".router-link-exact-active").index()
        if(!($(this).children(".wp-aside-nav__main-item-img").hasClass("item_image_hover"))){
            if(id==0){
                vm.dropboximage1="images/dropboxactive.png"
                vm.dropboximage2="images/dropbox.png"
                vm.friendimage="images/friendimage.png"
                vm.judge[0]=true
                vm.judge[1]=false
                vm.judge[2]=false
                fn()
            }else if(id==1){
                vm.dropboximage2="images/dropboxactive.png"
                vm.dropboximage1="images/dropbox.png"
                vm.friendimage="images/friendimage.png"
                vm.judge[0]=false
                vm.judge[1]=true
                vm.judge[2]=false
                fn()
            }else{
                vm.friendimage="images/friendimageactive.png"
                vm.dropboximage2="images/dropbox.png"
                vm.dropboximage1="images/dropbox.png"
                vm.judge[0]=false
                vm.judge[1]=false
                vm.judge[2]=true
                fn()
            }
        }
    })
</script>

<!--网盘相关js-->
<script src="./js/netDisk.js"></script>

</body>
</html>